<template>
  <div class="video">
    <home-page></home-page>
    <list-title>广告位招租</list-title>
    <banner :imgs="banners"></banner>
    <list-title>全部MV</list-title>
    <loading v-if="mvs.length == 0"></loading>
    <ul class="imgList" v-else>
      <img-item
        v-for="mv in mvs"
        :key="mv.id"
        :song="mv"
        path="/mv"
      ></img-item>        
    </ul>
  </div>
</template>

<script>
import ListTitle from "@/components/ListTitle.vue";
import ImgItem from "@/components/ImgItem.vue";
import Banner from "@/components/Banner";
import HomePage from "@/components/HomePage";
export default {
  name: "Video",
  data() {
    return {
      banners: [],
      mvs: [],
    };
  },
  components: {
    ListTitle,
    ImgItem,
    Banner,
    HomePage
  },
  created() {
    this.axios.get("/banner?type=1").then((result) => {
      this.banners = result.banners;
    });
    this.axios.get("/mv/all").then((result) => {
      // console.log(result);
      this.mvs = result.data.map((v) => {
        v.picUrl = v.cover;
        return v;
      });
    });
  },
};
</script>
<style scoped lang="less">
.imgList {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    padding-top: 10px;
    margin:10px 0;
    padding-bottom: 50px;
    justify-content: space-evenly;
    li{
      width: 170px;
    }
}
</style>